<script setup lang="ts">
//多媒体页面模版，电影、音乐、书籍等
import { DataMedium } from "@/store/interface";
import SvgIcon from "@/components/icon/SvgIcon.vue";
import { ColorSetting, IconData } from "@/store/tool";
defineProps<{
  Data: DataMedium[]; //数据
  Img: string; //图片
  numMsg: string; //编号描述
  btnMsg: string; //按钮描述
}>();
</script>

<template>
  <div class="flex items-center flex-wrap gap-6 my-8">
    <div class="min-w-full md:min-w-[47%] lg:min-w-[31%]" v-for="items in Data">
      <div
        class="flex flex-col justify-center p-8 dark:bg-gray-800 bg-white rounded-lg shadow-xl card"
      >
        <div class="prod-title text-center">
          <p class="text-2xl font-bold uppercase">
            {{ items.title }}
          </p>
          <!--作者-->
          <p class="text-sm uppercase mt-2">
            <span v-for="ite in items.author">
              {{ ite }}
              {{ items.author.length > 1 ? "," : "" }}
            </span>
          </p>
        </div>
        <div class="flex flex-col justify-center items-center" v-show="false">
          <SvgIcon
            class="object-cover object-center w-20 h-20 hidden md:block"
            :name="IconData[Img]"
            :color="ColorSetting.default"
            title="首页"
            alt="首页"
          />
        </div>
        <div class="grid gap-6 prod-info mt-2">
          <span class="text-xs">
            {{ items.country }} - {{ items.language || "汉语" }} -
            {{ items.time }}
            <p>
              类型：
              <span v-for="ite in items.type">
                {{ ite }}
              </span>
            </p>
            <!--编号-->
            <p :class="{ invisible: !items.number }">
              <b>{{ numMsg }}：</b>{{ items.number }}
            </p>
          </span>

          <div class="flex flex-col items-center justify-between md:flex-row">
            <!--
              <p class="text-xl font-bold" >65 $</p>
            -->
            <button
              class="w-full px-6 py-2 uppercase transition duration-200 ease-in border-2 border-gray-900 rounded-full dark:hover:bg-gray-400 hover:bg-gray-800 hover:text-white focus:outline-none"
            >
              <a :href="items.link" target="_blank">{{
                btnMsg
              }}</a>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
